<template>
  <view class="search-container">
    <view class="search-box" @click="goSearchPage">
      <uni-icons type="search" size="18"></uni-icons>
       <text class="placeholder"> 搜索面试题</text>
    </view> 
  </view>
  <!-- 分类标签栏 -->
  <TabNav :tabs="tabs" displayField="name" @custom-click="(tab) => getQuestionList(tab.id)"></TabNav>
  <!-- 面试题分类列表 -->
  <view class="question-list">
    <template v-if="isLoading">
      <view class="loading">加载中...</view>
    </template>
    <template v-else-if="categories.length > 0">
      <navigator
        v-for="(category, index) in categories"
        :key="index"
        class="category-item"
        :url="`/subPackages/catergories_detail/catergories_detail?category_id=${category.id}&category_description=${category.description}&category_name=${category.name}&category_coverImageUrl=${category.coverImageUrl}`"  
      >
        <view class="category-content">
          <image :src="category.coverImageUrl" mode="tupian"></image>
          <text>{{ category.name }}</text> 
        </view>  
        <text class="arrow">></text>
      </navigator>
    </template>
    <template v-else>
      <no-data message="暂无分类数据" />
    </template>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TabNav from '@/components/TabNav.vue';
import NoData from '@/components/no-data.vue';
//去搜索页面
const goSearchPage=()=>{
  uni.navigateTo({
    url:'/subPackages/search/search'
  })
}
// 面试题分类
const categories = ref([]);
// 标签数据
const tabs = ref([]);
// 加载状态
const isLoading = ref(false);

// 进入页面时加载数据
onMounted(async () => {
  try {
    // 获取导航栏标签数据
    await fetchTags();
    // 获取"热门"标签对应的面试题
    await getQuestionList(1);
  } catch (error) {
    console.error('获取数据失败', error);
  }
});

// 获取导航栏标签数据
const fetchTags = async () => {
  isLoading.value = true;
  try {
    const res = await uni.$http.get('/api/v1/tags');
    if (res.data && res.data.data) {
      tabs.value = res.data.data;
    } else {
      tabs.value = [];
    }
  } catch (error) {
    console.error('获取标签数据失败', error);
    tabs.value = [];
  } finally {
    isLoading.value = false;
  }
};

// 获取面试题数据
const getQuestionList = async (tabId) => {
    isLoading.value = true;
    try {
        const res = await uni.$http.get(`/api/v1/topics/${tabId}`);
        if (res.data.data) {
            categories.value = res.data.data;
             // 遍历 categories 数组，对每个对象的 coverImageUrl
            /* for (const item of categories.value) {
              const headerurl='https://8.138.120.116:8088/'
                const newImageData = headerurl+item.coverImageUrl
                if (newImageData) {
                    item.coverImageUrl = newImageData;
                }
            } */
            categories.value.filter(item=>item.coverImageUrl='https://www.liujie.cyou/'+item.coverImageUrl)
        } else {
            categories.value = [];
        }
    } catch (error) {
        console.error('获取面试题数据失败', error);
        categories.value = [];
    } finally {
        isLoading.value = false;
    }
};
    
</script>

<style lang="scss">
.search-container{
  height: 40px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  .search-box{
    height: 36px;
    background-color: #ffffff;
    border-radius: 25px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   .placeholder{
     font-size: 15px;
     letter-spacing: 2px;
     margin-left: 10px;
   }
  }
}
.question-list {
  min-height: 200rpx;
  
  .loading {
    text-align: center;
    padding: 40rpx;
    color: #999;
  }
  
  .category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    .category-content{
      display: flex;
      align-items: center;
      image{
        width: 70rpx;
        height: 70rpx;
        margin-right: 30rpx;
      }
    }
  }
  .category-item:hover {
    background-color: #f5f5f5;
  }
  .arrow {
    font-size: 50rpx !important;
    color: #cccccc;
  }
}
</style>

